<template>
<div>
   <div class="filterBox" style="text-align: left;">
    <el-form label-width="80px" :model="keywordValue">
      <el-form-item :label="item.key" v-for="item in allProps" :key="item.key">
        <el-cascader
          style="width:100%;"
          v-model="keywordValue[item.key]"
          :props="item.props"
          :placeholder="'不限'"
          :show-all-levels="false"
          :ref="item.key"
          @change="changeSelect"
          filterable
          clearable
        ></el-cascader>
      </el-form-item>

      <el-form-item
        label-position="left"
        :label="item.key"
        v-for="item in allGroups"
        :key="item.key"
      >
        <el-radio-group v-model="keywordValue[item.key]" @change="changeSelect">
          <el-radio-button label="不限" clearable></el-radio-button>
          <el-radio-button
            v-for="item in item.group"
            :key="item.keyName"
            :label="item.keyName"
            :value="item.keyName"
          ></el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
  <div style="clear:both;"></div>
</div>

</template>>

<style>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.el-form{
  float:left;
}
</style>
<script>
import { requestKeywordsGetByParent } from "../api/index";

export default {
  name: "filterBox",
  methods:{
    changeSelect(){
      let keywordValue = this.keywordValue;
      let refs = this.$refs;
      let result = {};
      for (var key in keywordValue) {
        if (refs[key]) {
          let node = refs[key][0].getCheckedNodes();
          if (node.length != 0) {
            result[key] = node[0].label;
          }
        }else{
          result[key] = keywordValue[key]
        }
      }
      this.$emit("getChildData", result);
    }
    
  },
  data() {
    return {
      keywordValue: {},
      node: {},
      // 所有cascader的内容
      allProps: [],
      // 所有radio-group的内容
      allGroups: []
    };
  },
  created: function() {
    let requestMap = {
      city: {
        method: requestKeywordsGetByParent,
        isCascader: false
      },
      position: {
        method: requestKeywordsGetByParent,
        isCascader: true
      },
      kind: {
        method: requestKeywordsGetByParent,
        isCascader: false
      },
      edu: {
        method: requestKeywordsGetByParent,
        isCascader: false
      },
      stage: {
        method: requestKeywordsGetByParent,
        isCascader: false
      },
      scale: {
        method: requestKeywordsGetByParent,
        isCascader: false
      },
      nature: {
        method: requestKeywordsGetByParent,
        isCascader: true
      }
    };

    requestKeywordsGetByParent().then(data => {
      let result = data.result;
      result.forEach(element => {
        if (requestMap[element.keyName].isCascader) {
          let props = {
            lazy: true,
            lazyLoad(node, resolve) {
              const { level, value } = node;
              requestMap[element.keyName]
                .method({ parent_id: value || element.id })
                .then(res => {
                  const nodes = res.result.map(x => ({
                    value: x.id,
                    label: x.keyName,
                    leaf: x.leaf
                  }));
                  resolve(nodes);
                });
            }
          };
          this.allProps.push({ props: props, key: element.keyName });
        } else {
          let groups = {};
          requestMap[element.keyName]
            .method({ parent_id: element.id })
            .then(res => {
              this.allGroups.push({ group: res.result, key: element.keyName });
            });
        }
      });
    });
  }
};
</script>